<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <u-navbar
      :is-back="false"
      title="预约座位"
      title-color="#ffffff"
      :background="{ background: 'linear-gradient(to right, #1A8DFF, #0269D3)' }"
    ></u-navbar>
    
    <!-- 预约流程 -->
    <view class="steps-section">
      <u-steps :current="current" :list="stepsList" direction="column"></u-steps>
    </view>
    
    <!-- 预约表单 -->
    <view class="form-section">
      <view class="form-item">
        <view class="label">选择日期</view>
        <view class="input-wrapper" @click="showDatePicker = true">
          <text v-if="formData.date">{{ formData.date }}</text>
          <text v-else class="placeholder">请选择日期</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="form-item">
        <view class="label">选择时段</view>
        <view class="time-slots">
          <view 
            class="time-slot" 
            v-for="(item, index) in timeSlots" 
            :key="index"
            :class="{ active: formData.timeSlot === item.value }"
            @click="selectTimeSlot(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <view class="label">选择图书馆</view>
        <view class="input-wrapper" @click="goToLibrarySelect">
          <text v-if="formData.libraryName">{{ formData.libraryName }}</text>
          <text v-else class="placeholder">请选择图书馆</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="form-item" v-if="formData.libraryId">
        <view class="label">选择楼层</view>
        <view class="input-wrapper" @click="goToFloorSelect">
          <text v-if="formData.floorName">{{ formData.floorName }}</text>
          <text v-else class="placeholder">请选择楼层</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="form-item" v-if="formData.floorId">
        <view class="label">选择区域</view>
        <view class="input-wrapper" @click="goToAreaSelect">
          <text v-if="formData.areaName">{{ formData.areaName }}</text>
          <text v-else class="placeholder">请选择区域</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="form-item" v-if="formData.areaId">
        <view class="label">选择座位</view>
        <view class="input-wrapper" @click="goToSeatSelect">
          <text v-if="formData.seatName">{{ formData.seatName }}</text>
          <text v-else class="placeholder">请选择座位</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-button">
      <u-button type="primary" :disabled="!isFormValid" @click="goToConfirm">下一步</u-button>
    </view>
    
    <!-- 日期选择器 -->
    <u-calendar
      :show="showDatePicker"
      mode="single"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="dateConfirm"
      @close="showDatePicker = false"
    ></u-calendar>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      current: 0,
      stepsList: [
        {
          name: '选择时间'
        },
        {
          name: '选择座位'
        },
        {
          name: '确认预约'
        },
        {
          name: '预约成功'
        }
      ],
      formData: {
        date: '',
        timeSlot: '',
        libraryId: '',
        libraryName: '',
        floorId: '',
        floorName: '',
        areaId: '',
        areaName: '',
        seatId: '',
        seatName: ''
      },
      timeSlots: [
        { label: '上午 (8:00-12:00)', value: 'morning' },
        { label: '下午 (13:00-17:00)', value: 'afternoon' },
        { label: '晚上 (18:00-22:00)', value: 'evening' },
        { label: '全天 (8:00-22:00)', value: 'allday' }
      ],
      showDatePicker: false,
      minDate: new Date().getTime(),
      maxDate: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).getTime()
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'hasLogin']),
    isFormValid() {
      return this.formData.date && 
             this.formData.timeSlot && 
             this.formData.libraryId && 
             this.formData.floorId && 
             this.formData.areaId && 
             this.formData.seatId
    }
  },
  onLoad(options) {
    // 如果从其他页面返回，恢复之前的表单数据
    const reserveData = uni.getStorageSync('reserveData')
    if (reserveData) {
      this.formData = JSON.parse(reserveData)
      
      // 根据已选项确定当前步骤
      if (this.formData.seatId) {
        this.current = 2
      } else if (this.formData.libraryId) {
        this.current = 1
      } else {
        this.current = 0
      }
    }
  },
  onShow() {
    // 检查登录状态
    if (!this.hasLogin) {
      this.checkLogin()
    }
  },
  methods: {
    // 选择时段
    selectTimeSlot(value) {
      this.formData.timeSlot = value
    },
    
    // 日期确认
    dateConfirm(e) {
      this.formData.date = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd')
      this.showDatePicker = false
    },
    
    // 跳转到图书馆选择
    goToLibrarySelect() {
      if (!this.formData.date || !this.formData.timeSlot) {
        uni.showToast({
          title: '请先选择日期和时段',
          icon: 'none'
        })
        return
      }
      
      // 保存当前表单数据
      uni.setStorageSync('reserveData', JSON.stringify(this.formData))
      
      uni.navigateTo({
        url: '/pages/reserve/library'
      })
    },
    
    // 跳转到楼层选择
    goToFloorSelect() {
      uni.navigateTo({
        url: `/pages/reserve/floor?libraryId=${this.formData.libraryId}`
      })
    },
    
    // 跳转到区域选择
    goToAreaSelect() {
      uni.navigateTo({
        url: `/pages/reserve/area?floorId=${this.formData.floorId}`
      })
    },
    
    // 跳转到座位选择
    goToSeatSelect() {
      uni.navigateTo({
        url: `/pages/reserve/seat?areaId=${this.formData.areaId}&date=${this.formData.date}&timeSlot=${this.formData.timeSlot}`
      })
    },
    
    // 跳转到确认页面
    goToConfirm() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请完成所有选择',
          icon: 'none'
        })
        return
      }
      
      // 保存当前表单数据
      uni.setStorageSync('reserveData', JSON.stringify(this.formData))
      
      uni.navigateTo({
        url: '/pages/reserve/confirm'
      })
    },
    
    // 检查登录状态
    checkLogin() {
      if (!this.hasLogin) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            } else {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }
          }
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.steps-section {
  background-color: #ffffff;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.form-section {
  background-color: #ffffff;
  padding: 0 20rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  
  .placeholder {
    color: #999;
  }
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
}

.time-slot {
  width: 48%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  
  &:nth-child(odd) {
    margin-right: 4%;
  }
  
  &.active {
    background-color: #e6f2ff;
    color: #1A8DFF;
    border: 1rpx solid #1A8DFF;
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
